const path = require('path')
const webpack = require('webpack') // eslint-disable-line
const opn = require('opn') // eslint-disable-line
const webpackMerge = require('webpack-merge')

const baseConfig = require('./webpack.base')

const config = webpackMerge(baseConfig, {
  output: {
    filename: 'js/[name].[hash].js',
  },
  devtool: 'cheap-module-source-map', // 开启sourceMap调试
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: ['babel-loader'],
        exclude: [
          path.resolve(__dirname, '../node_modules'),
        ],
      }, {
        test: /\.(css|less)$/,
        use: [
          {
            loader: 'style-loader',
            options: {
              sourceMap: true, // css-source-map
            },
          },
          {
            loader: 'css-loader',
            options: {
              // module: true, // 不使用CSS-Module
              minimize: true,
              sourceMap: true,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true,
              ident: 'postcss',
              plugins: [],
            },
          },
          {
            loader: 'less-loader',
            options: {
              sourceMap: true,
            },
          },
        ],
      }, {
        test: /\.(png|jpg|gif|jpeg)/,
        use: [
          {
            loader: 'file-loader', // 开发模式下只使用file-loader 加快打包速度，提升开发效率
          },
        ],
      }, {
        test: /\.(eot|svg|ttf|woff)/,
        use: [
          'url-loader',
        ],
      },
    ],
  },
  plugins: [
    // 使用模块热更新
    new webpack.HotModuleReplacementPlugin(),
  ],

  devServer: {
    host: '0.0.0.0',
    port: '8888',
    contentBase: path.resolve(__dirname, '../dist/'),
    hot: true,
    overlay: {
      errors: true,
    },
    proxy: {
      '/api': 'http://localhost:3000', // 借口代理
    },
    historyApiFallback: true,
    after() {
      opn('http://localhost:8888') // 打开浏览器
    },
  },

})

module.exports = config
